<template>

</template>

<script>
import { fetchUserRepositories } from "@/api/table";
import { ref, onMounted, watch, toRefs, computed, defineComponent } from "vue";
export default defineComponent({
  props: {
    user,
  },
  setup(props) {
    const { user } = toRefs(props);
    const repositories = ref([]);
    const getUserRepositories = async () => {
      repositories.value = await fetchUserRepositories(user.value);
    };
    onMounted(getUserRepositories);

    watch(user, getUserRepositories);

    const searchQuery = ref("");
    const repositoriesMatchingSearchQuery = computed(() => {
      return repositories.value.filter((respository) =>
        respository.name.includes(searchQuery.value)
      );
    });

    return {
      repositories,
      getUserRepositories,
      searchQuery,
      repositoriesMatchingSearchQuery,
    };
  },
});
</script>
